<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-container fluid fill-height>
      <v-layout justify-center align-start row wrap>
        <v-flex xs12 md12>
          <v-btn color="green darken-1" dark @click="openCreateInsDialog">
            <span class="mx-1">添加铭文</span>
            <v-icon color="white">add</v-icon>
          </v-btn>
        </v-flex>
        <v-flex text-xs-center md12 xs12>
          <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
            <template slot="items" slot-scope="props">
              <td class="text-xs-center subheading">{{ props.item.insName }}</td>
              <td class="text-xs-center subheading">{{ props.item.insType | InsType }}</td>
              <td class="text-xs-center subheading">
                <v-avatar size="36" tile>
                  <img :src="props.item.insUrl" alt="">
                </v-avatar>
              </td>
              <td class="text-xs-center">
                <v-btn flat round dark color="indigo darken-1" class="mx-1" @click="showInsDetails(props.item)">
                  <span class="mx-1">详情</span>
                  <v-icon color="indigo darken-1">more</v-icon>
                </v-btn>
                <v-btn flat round dark color="red darken-1" class="mx-1" @click="deleteItem(props.item)">
                  <span class="mx-1">删除</span>
                  <v-icon color="red darken-1">delete_forever</v-icon>
                </v-btn>
              </td>
            </template>
            <template slot="no-data">
              <div class="text-md-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">请添加铭文数据</span>
              </div>
            </template>
          </v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
    <v-dialog v-model="dialog" persistent max-width="812px">
      <v-card>
        <v-card-title>
          <span class="headline">添加铭文</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="铭文名称" required v-model="inscription.insName"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>铭文图片</span>
                  <input
                    @change="insImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    ref="equImage"
                    class="file-input"
                  >
                </v-btn>
                <img v-show="insImage" :src="insImage" class="dialog-image" alt="" srcset="">

                <!-- <span>{{insUrlName}}</span> -->
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-select :items="insTypeItems" v-model="inscription.insType" label="铭文类型" required></v-select>
              </v-flex>

              <v-flex xs12 sm6 md4>
                <v-text-field label="物理攻击" required v-model="inscription.physicalAttack"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="法术攻击"
                  persistent-hint
                  required
                  v-model="inscription.spellAttack"
                ></v-text-field>
              </v-flex>

              <v-flex xs12 sm6 md4>
                <v-text-field label="物理防御" required v-model="inscription.physicalDefense"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="法术防御"
                  persistent-hint
                  required
                  v-model="inscription.spellDefense"
                ></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="最大生命" required v-model="inscription.maxHealth"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="暴击率"
                  persistent-hint
                  required
                  v-model="inscription.criticalStrike"
                ></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="暴击效果" required v-model="inscription.criticalEffect"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="攻击速度"
                  persistent-hint
                  required
                  v-model="inscription.attackSpeed"
                ></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="移动速度" required v-model="inscription.moveSpeed"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="物理护甲穿透"
                  persistent-hint
                  required
                  v-model="inscription.physicalArmor"
                ></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="法术护甲穿透" required v-model="inscription.spellArmor"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="物理吸血" required v-model="inscription.physicalRevive"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="法术吸血"
                  persistent-hint
                  required
                  v-model="inscription.spellRevive"
                ></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="5秒回血" required v-model="inscription.fivesecRevive"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="冷却缩减" persistent-hint required v-model="inscription.coolDown"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="物理攻击2----通用属性" required v-model="inscription.physicalAttack2 "></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="法术攻击2---通用属性"
                  persistent-hint
                  required
                  v-model="inscription.spellAttack2 "
                ></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="生命2---通用属性"
                  persistent-hint
                  required
                  v-model="inscription.maxHealth2"
                ></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmInscription">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import axios from "../api";
import { ins } from "../api/request";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    iamgeIndex: 0,
    imageName: "",
    currentImage: { name: "" },
    markedArticle: "",
    transArticle: "",
    imageList: [],
    dialog: false,
    // 包含图片
    equUrl: null,
    relationUrl: null,
    inscription: {
      insName: "",
      insType: 1,
      physicalAttack: '',
      spellAttack: '',
      physicalDefense: '',
      spellDefense: '',
      maxHealth: '',
      criticalStrike: '',
      criticalEffect: '',
      attackSpeed: '',
      moveSpeed: '',
      physicalArmor: '',
      spellArmor: '',
      physicalRevive: '',
      spellRevive: '',
      fivesecRevive: '',
      coolDown: '',
      physicalAttack2: '',
      spellAttack2: '',
      maxHealth2: ''
    },
    insUrlName: "",
    relUrlName: "",
    insTypeItems: [
      {
        text: "蓝色",
        value: 1
      },
      {
        text: "绿色",
        value: 2
      },
      {
        text: "红色",
        value: 3
      }
    ],
    tableData: [],
    headers: [
      { text: "名称", value: "lftid", align: "center", sortable: false },
      { text: "类型", value: "nickname", align: "center", sortable: false },
      { text: "图像", value: "nickname", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    offset: 0,
    limit: 10,
    insImage: ''
  }),
  mounted() {
    this.getInsList();
  },
  filters: {},
  methods: {
    openCreateInsDialog() {
      this.inscription = {
      insName: "",
      insType: 1,
      physicalAttack: '',
      spellAttack: '',
      physicalDefense: '',
      spellDefense: '',
      maxHealth: '',
      criticalStrike: '',
      criticalEffect: '',
      attackSpeed: '',
      moveSpeed: '',
      physicalArmor: '',
      spellArmor: '',
      physicalRevive: '',
      spellRevive: '',
      fivesecRevive: '',
      coolDown: '',
      physicalAttack2: '',
      spellAttack2: '',
      maxHealth2: ''
      
      }
      this.dialog = true
    },
    confirmInscription() {
      // this.tableData.push({
      //   ...this.inscription
      // });
      this.uploadInscription();
    },
    deleteItem(item) {
      // this.tableData.splice(item.index, 1);
      console.warn(item);
    },
    showInsDetails(item) {
      this.inscription = item;
      this.dialog = true;
    },
    getInsList() {
      let params = {
        // offset: this.offset,
        // limit: this.limit
      }
      ins.getInsList.r(params).then(({data})=>{
        console.log('getInsList', data);
        this.tableData = data.data.dataList
      })
    },
    getInsTypeList() {
      let params = {
        inType: 1
      };
      ins.getInsTypeList.r(params).then(({data})=>{
        console.log('getInsList', data);
      })
    },
    getInsInfo() {
      let params = {
        id: 1
      }
      ins.getInsInfo.r(params).then(({data})=>{
        console.log('getInsList', data);
      })
    },
    uploadInscription() {
      let form = new FormData();
      for (let key in this.inscription) {
        let val = this.inscription[key]
        if(val) {
          form.append(key, val);
        } else {
          form.append(key, 0);
        }
      }
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      ins.uploadInscription.r(form, config).then(({ data }) => {
        this.dialog = false;
        alert(data.messsage)
        console.log('uploadInscription', data);
      });
    },

    insImageHandler(ev) {
      let file = ev.target.files[0];
      this.inscription.insUrl = file;
      this.insUrlName = file.name;
      let fr = new FileReader();
      let that = this;
      fr.onload = (res) => {
        this.insImage = res.target.result;
      }
      fr.readAsDataURL(file);
    }
  }
};
</script>
<style lang="less" scoped>
#marked-article {
  text-align: left;
  font-size: 18px;
  padding: 0.8rem 1rem;
  height: 100%;
}

img {
  width: 100%;
}

.article-content {
  min-height: 12em;
  width: 100%;
  text-align: left;
  padding: 1em;
  font-size: 1.2rem;
}

.image-list {
  li {
    display: flex;
    flex-direction: column;
    list-style: none;
    .image-list-item {
      width: 5rem;
    }
    .image-list-name {
      font-size: 1rem;
    }
  }
}

.input-wrapper {
  display: inline-block;
  position: relative;
  // width: 6rem;
  // height: 3.2rem;
  // border: 2px dashed #5ff44a;
  // border-radius: 4px;
  .file-input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
}
</style>